<template>
  <div style="">
    <van-nav-bar title="账单" left-text="返回" left-arrow @click-left="onClickLeft" />
  </div>

  <div style="margin-top: 40px;text-align: center;">
    <van-cell-group inset>
      <!-- 绑定 chargingPW 和 chargingMoney -->
      <van-field label="总功率" :model-value="chargingPW" readonly />
      <van-field label="总费用" :model-value="chargingMoney + '元'" readonly />
    </van-cell-group>
  </div>
  <div class="foot-div">
    <span><van-button round type="success" size="normal" @click="startCharging()">去支付</van-button></span>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import router from '@/router'
import axios from "axios";

const onClickLeft = () => history.back();

// 使用 ref 来定义响应式数据
const chargingPW = ref('');  // 总功率
const chargingMoney = ref('');  // 总费用
const chargeRecordId = ref('');

// 初始化函数
function init() {
  axios.post('http://localhost:8812/car/ownerCar', null, { params: { userId: 2 } })
      .then(res => {
        // 从接口响应中提取数据
        chargingPW.value = res.data.data.data[0].electromagnetic;  // 绑定到总功率
        chargingMoney.value = res.data.data.data[0].bill;  // 绑定到总费用
        chargeRecordId.value = res.data.data.data[0].id;  // 获取 chargeRecordId
      })
      .catch(err => {
        console.error('请求失败', err);
      });
}

// 跳转到支付页面
function startCharging() {
  console.log(chargeRecordId.value)
  axios.post('http://localhost:8812/car/payBill', null, { params: { id: 2 } }).then(

      router.push({ path: '/user/charge/money', query: { id: chargeRecordId.value, amount: chargingMoney.value } })
  )
}

// 初始化数据
init();
</script>

<style>
.main-div {
  margin: 8px;
  height: 65px;
  width: auto;
  display: flex;
  border-radius: 2%;
  background-color: gray;
}

image {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.foot-div {
  margin-top: 100px;
  text-align: center;
}
</style>
